Avatar Videos with Transparent Background

Generate avatars with transparent backgrounds for easy compositing

Introduction

Create avatar videos with transparent backgrounds (alpha channel) for easy compositing over other content. Perfect for presentations, video editing, or web applications.

Key Features

Green Screen

Chroma key background for video editing

Alpha Channel

True transparency with WebM format

Easy Compositing

Overlay on any background

Professional Editing

Works with all major video editors

Best for: Overlaying avatars on presentations, adding to existing videos, website backgrounds, video editing projects, green screen replacements, and AR/VR applications.

---

Quick Start

Related API Endpoints

Endpoint	Purpose	Documentation
POST /create_video_from_avatar	Create video with transparent background	API Reference
GET /avatar_video/{id}	Check video status	API Reference

Key Parameters

Parameter	Type	Required	Description
screen_style	integer	✅	2 = Split screen (green screen), 3 = Picture in picture (WebM alpha)
avatar.avatar_id	integer	✅	Choose full-body avatar for best results
avatar.avatar_type	integer	✅	0=Public, 1=Custom
voice.type	string	✅	“script” for text-to-speech
voice.voice_id	string	✅	Voice ID for text-to-speech
voice.script	string	✅	Text for avatar to speak
aspect_ratio	string	✅	portrait/landscape/square

Output Formats:

• Split Screen (screen_style: 2): MP4 with green background - use chroma key in video editor
• Picture in Picture (screen_style: 3): WebM with alpha channel - true transparency, no keying needed

---

Code Examples

Scenario 1: Green Screen (Split Screen)

Create video with green screen for video editing:

curl --request POST \
  --url 'https://api.jogg.ai/v2/create_video_from_avatar' \
  --header 'x-api-key: YOUR_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "avatar": {
      "avatar_id": 81,
      "avatar_type": 0
    },
    "voice": {
      "type": "script",
      "voice_id": "en-US-ChristopherNeural",
      "script": "Welcome! This avatar has a transparent background."
    },
    "aspect_ratio": "portrait",
    "screen_style": 2,
    "caption": false
  }'

Response:

{
  "code": 0,
  "msg": "Success",
  "data": {
    "video_id": "video_123456"
  }
}

Use for:

• Video editing software (Premiere, Final Cut, DaVinci)
• Broadcast applications
• Maximum compatibility

How to use:

1. Import video to editor
2. Apply chroma key effect
3. Remove green color
4. Composite over background

---

Scenario 2: WebM with Alpha Channel

Create video with true transparency:

curl --request POST \
  --url 'https://api.jogg.ai/v2/create_video_from_avatar' \
  --header 'x-api-key: YOUR_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "avatar": {
      "avatar_id": 81,
      "avatar_type": 0
    },
    "voice": {
      "type": "script",
      "voice_id": "en-US-ChristopherNeural",
      "script": "Your script here"
    },
    "aspect_ratio": "portrait",
    "screen_style": 3
  }'

Response:

{
  "code": 0,
  "msg": "Success",
  "data": {
    "video_id": "video_123456"
  }
}

Use for:

• Web applications
• HTML5 video players
• Direct compositing without keying

How to use:

<video autoplay loop muted playsinline>
  <source src="avatar-transparent.webm" type="video/webm">
</video>

Set screen_style: 2 for green screen (video editing) or screen_style: 3 for WebM with alpha channel (web applications).

---

Use Case Examples

Video Editing Projects

Composite avatars into existing videos:

• Use green screen format (screen_style: 2)
• Import to Premiere, Final Cut, or DaVinci
• Apply chroma key effect
• Overlay on any background

Web Applications

Add avatars to websites:

• Use WebM with alpha (screen_style: 3)
• Embed in HTML5 video player
• Overlay on dynamic backgrounds
• No keying required

Presentations

Add avatars to slides:

• Create transparent avatar videos
• Overlay on presentation slides
• Professional appearance
• Easy to update

AR/VR Applications

Use avatars in immersive experiences:

• WebM with alpha channel
• True transparency
• Composite in 3D environments
• Realistic integration

---

Tips for Best Results

Quality Tips:

• Use full-body avatars for best results
• Test composite in target environment
• For web, use WebM with alpha (screen_style: 3)
• For video editing, use green screen (screen_style: 2)
• Avoid captions if compositing over text-heavy backgrounds
• Green screen works best with even lighting
• WebM alpha has cleaner edges

---

Related Documentation

Create Avatar Videos

Main avatar video guide

Get Avatar Video

Check video generation status

API Reference

Complete API documentation

Get Avatars

Browse available avatars